<!--
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2022-10-12 09:14:20
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-11-21 10:49:53
 * @FilePath: /vue3-datav/src/components/ui/StatusContainer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { toRefs } from 'vue';
const props = withDefaults(defineProps<{
    isLoading: boolean;
    isEmpty: boolean;
    isError?: boolean;
}>(), {
    isLoading: false,
    isEmpty: false,
    isError: false
});
const {
    isLoading,
    isEmpty,
    isError
} = toRefs(props);
</script>

<template>
    <div class="status-container">
        <slot name="loading" v-if="isLoading">
            <div class="tip-text">加载中~</div>
        </slot>
        <slot name="error" v-else-if="isError">
            <div class="tip-text">sorry！出错了~</div>
        </slot>
        <slot name="empty" v-else-if="isEmpty">
            <div class="tip-text">数据为空~</div>
        </slot>
        <slot v-else></slot>
    </div>
</template>

<style lang="scss" scoped>
.status-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .tip-text {
        color: #fff;
        font-size: inherit;
        text-align: center;
    }
}
</style>
